import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
// import './index.scss'
import classNames from 'classnames'
import styles from './index.module.scss'
import { pxTransform } from "@/utils/utils"
import { NAV_BAR_HEIGHT } from '@/config/config'
// import { toHomePage } from "@/utils/page_router"

interface IProps {
  opacity: any
}

export default class GoodsNavbar extends Component<IProps, {}> {
  state: any
  props: any
  static options = {
    addGlobalClass: true
  }

  constructor() {
    super(...arguments)
    this.state = {}
  }

  // //  返回上一页面
  // onBack () {
  //   const pages = Taro.getCurrentPages()
  //   if (pages.length === 1) {
  //     toHomePage()
  //   } else {
  //     Taro.navigateBack()
  //   }
  // }

  render() {
    const { opacity, nodeKey, nodeList, onSwitchNode } = this.props
    const prefixCls = 'goods-navbar'
    const heightRem = pxTransform(NAV_BAR_HEIGHT)
    const percent:any = (100 / nodeList.length).toFixed(2)
    return (<View id='goods-navbar' className={`fy-popup fy-popup--top ${styles[prefixCls]}`} style={{ height: heightRem, background: `rgba(255, 255, 255, ${opacity})` }}>
      {/*<View className={`${prefixCls}-back f-g-5`} style={{ height: heightRem }} onClick={this.onBack.bind(this)}>*/}
      {/*  <View className={`${prefixCls}-back-icon bnn-icon`}>&#xe7e0;</View>*/}
      {/*</View>*/}
      <View className={styles[`${prefixCls}-area`]} style={{ opacity }}>
        <View className={styles[`${prefixCls}-node-list`]}>
          {
            nodeList.map((item, key) => {
              return (
                <View key={item.id} className={classNames(styles[`${prefixCls}-node-item`], 'f-g-5')} onClick={() => onSwitchNode(item, key)}>
                  {item.name}
                </View>
              )
            })
          }
          <View className={styles[`${prefixCls}-under-line`]} style={{ left: `calc(${nodeKey * percent}% + (${percent}% / 2))` }}/>
        </View>
      </View>
    </View>)
  }
}
